<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>canvas与video</title>
    <style>
        body {
            margin: 0;
        }
        video {
            display: none;
        }
        canvas {
            display: block;
        }
        .controls {
            position: absolute;
            bottom: 10px;
            left: 0;
        }
    </style>
    <script src="../../RequestAnimationFrame.js"></script>
    <script src="../../Tween.js"></script>
</head>
<body>
    <video id="v">
        <source src="../../video/pano.mp4" type="video/mp4">
        <source src="../../video/pano.webm" type="video/webm">
    </video>
    <canvas id="c"></canvas>
    <div class="controls">
        <button id="play">播放</button>
        <button id="pause">暂停</button>
        <button id="boom">分散</button>
        <button id="back">还原</button>
    </div>
<script src="./index.js"></script>
</body>
</html>